<template>
	<!-- 个人中心 -->
	<div v-if="!is_password">
		<div class="edit-top">
			个人中心
			<i class="el-icon-close" @click='cancel'></i>
		</div>
		<div class="edit-content" v-if="type == 0">
			<div class="edit-item-avatar">
				<span style="cursor: pointer;" @click='is_upload = !is_upload' v-if='!is_upload'>
						<el-avatar :size="120"   :src="'http://122.228.189.214:18099/'+avatar" ></el-avatar>
				</span>
				<template v-else>
					<el-upload
					  class="avatar-uploader"
					  :action="imageuploadurl"
					  :show-file-list="false"
					  :headers="importHeaders"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-button size="mini" @click='is_upload = !is_upload' type="primary" >取消</el-button>
					
				</template>
				
				</div>
			
			<div class="edit-item">
				<label>用户名</label><span class="edit-item-span">{{info.userName}}</span>
				<label>密码</label><el-button @click='is_password = !is_password' type="primary">修改密码</el-button>
			</div>
			<div class="edit-item">
				<label>联系电话</label><input v-model="info.workMobileNum" type="text" />
			</div>
			<div class="edit-item">
				<label>邮箱</label><input v-model="info.email" type="text" />
			</div>
			<div class="edit-item">
				<label>身份证号</label>{{info.idCard}}
			</div>
			<div class="edit-item">
				<label>性别</label>
				<el-radio v-for='item in dict.sex' :key='item.value' v-model="sex" :label="item.value">{{item.type}}</el-radio>
			</div>
			<div class="edit-item">
				<label>所属部门</label>{{info.deptName}}
			</div>
			<div class="edit-item">
				<label>岗位</label><template v-for='item in info.positions'>{{item.positionName}} &nbsp;&nbsp;
					</template>
			</div>
		</div>
		<div class="edit-content" v-else>
			<div class="edit-item-avatar">
				<span style="cursor: pointer;" @click='is_upload = !is_upload' v-if='!is_upload'>
						<el-avatar :size="120"   :src="'http://122.228.189.214:18099/'+avatar" ></el-avatar>
				</span>
				<template v-else>
					<el-upload
					  class="avatar-uploader"
					  :action="imageuploadurl"
					  :show-file-list="false"
					  :headers="importHeaders"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-button size="mini" @click='is_upload = !is_upload' type="primary" >取消</el-button>
					
				</template>
				
				</div>
			
			<div class="edit-item">
				<label>用户名</label><span class="edit-item-span">{{info.userName}}</span>
				<label>密码</label><el-button @click='is_password = !is_password' type="primary">修改密码</el-button>
			</div>
			<div class="edit-item">
				<label>联系电话</label><input v-model="info.mobileNum" type="text" />
			</div>
			<div class="edit-item">
				<label>邮箱</label><input v-model="info.email" type="text" />
			</div>
			<div class="edit-item">
				<label>证件类型</label><template v-if="item.value == info.identityType" v-for='item in dict.identityType'>{{item.type}}
					</template>
			</div>
			<div class="edit-item">
				<label>证件号</label>{{info.identityNum}}
			</div>
			<div class="edit-item">
				<label>所属企业</label>{{info.enterpriseName}}
			</div>
			<div class="edit-item">
				<label>角色</label><template v-for='item in info.roles'>{{item.roleName}} &nbsp;&nbsp;
					</template>
			</div>
		</div>
		<div class="edit-bottom">
			<span @click='cancel'>取消</span>
			<el-button @click='save' type="primary">保存</el-button>
		</div>
		
	</div>
	<div v-else>
		<div class="edit-top">
			修改密码
			<i class="el-icon-close" @click='cancel'></i>
		</div>
		<div class="edit-content">
			<div class="edit-item">
				<label>原密码</label><input v-model="password_info.oldPassword"  type="password" />
			</div>
			<div class="edit-item">
				<label>新密码</label><input v-model="password_info.newPassword"  type="password" />
			</div>
			<div class="edit-item">
				<label>确认密码</label><input v-model="password_info.newPassword1"  type="password" />
			</div>
		</div>
		<div class="edit-bottom">
			<span @click='is_password = !is_password'>取消</span>
			<el-button @click='save_password' type="primary">保存</el-button>
		</div>
	</div>
</template>

<script>
	import Global from '@/components/Global.vue'
	export default {
		data() {
			return {
				password_info:{
					oldPassword:'',
					newPassword:'',
					newPassword1:'',
					sysUserId:'',
				},
				is_password:false,
				is_upload:false,
				info:{},
				type:'',
				sysUserInfo:{},
				id:'',
				dict:'',
				sex:'',
				imageUrl: '',
				imageuploadurl:'',
				importHeaders:'',
				circleUrl:'',
				avatar:'',
				
			}
		},
		mounted() {
			this.imageuploadurl = this.$global.serverIp + 'admin/upload/uploadProfile';
			this.importHeaders = {Authorization: 'Bearer ' + localStorage.getItem('token')};
			this.type = localStorage.getItem('type');
			this.id = localStorage.getItem('id');
			this.get_info();
		},
		methods: {
			handleAvatarSuccess(res, file) {
			        this.imageUrl = URL.createObjectURL(file.raw);
					this.avatar = res.data;
			      },
			      beforeAvatarUpload(file) {
			        const isJPG = file.type === 'image/jpeg';
			        const isLt2M = file.size / 1024 / 1024 < 2;
			
			        if (!isJPG) {
			          this.$message.error('上传头像图片只能是 JPG 格式!');
			        }
			        if (!isLt2M) {
			          this.$message.error('上传头像图片大小不能超过 2MB!');
			        }
			        return isJPG && isLt2M;
			      },
			save_password(){
				if(this.password_info.oldPassword == ''){
					this.$popup.open('原密码不能为空');
					return;
				}
				if(this.password_info.newPassword == ''){
					this.$popup.open('新密码不能为空');
					return;
				}
				if(this.password_info.newPassword != this.password_info.newPassword1){
					this.$popup.open('两次新密码不相同');
					return;
				}
				this.password_info.sysUserId = this.info.userId;
				var self = this;
				this.$axios.post(this.$global.serverIp + 'admin/sysUser/changeUserPassword', this.password_info)
					.then(function(res) {
						if (res != '') {
							self.$popup.open('修改成功');
							self.is_password = !self.is_password;
							self.password_info.oldPassword = '';
							self.password_info.newPassword = '';
							self.password_info.newPassword1 = '';
						}
					})
			},
			
			get_info(){
				var self = this;
				if(this.type == 0){
					this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=sysStaff')
					  .then(function (res) {
						  if(res != '')
							self.dict = res.data;
					  })
					this.$axios.get(this.$global.serverIp + 'admin/sysStaff/detail/'+this.id)
						.then(function(res) {
							if (res != '') {
								self.info = res.data;
								self.sex = self.info.sex+"";
								self.avatar = self.info.avatar;
								console.log('http://122.228.189.214:18099/'+self.avatar);
							}
						})
				}else{
					this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=sysClient')
					  .then(function (res) {
						  if(res != '')
							self.dict = res.data;
					  })
					this.$axios.get(this.$global.serverIp + 'admin/sysClient/detail/' + this.id)
						.then(function(res) {
							if (res != '') {
								self.info = res.data;
								self.sex = self.info.sex+"";
								self.avatar = self.info.avatar;
							}
						})
				}
			},
			save(){
				var self = this;
				if(this.type == 0){
					self.info.sysUserDto = {};
					self.info.sysUserDto.dataAuth = self.info.dataAuth+"";
					self.info.sysUserDto.userName = self.info.userName;
					self.info.sysUserDto.userStatus = self.info.userStatus;
					self.info.sysUserDto.id = self.info.userId;
					self.info.sysUserDto.avatar = self.avatar;
					// self.info.sysUser.chineseName = self.info.chineseName;
					var a = [];
					for(var i=0;i< self.info.positions.length;i++){
						a.push(self.info.positions[i].id);
					}
					self.info.positionIds = a;
					self.info.sex = self.sex;
					this.$axios.post(this.$global.serverIp + 'admin/sysStaff/update', self.info)
						.then(function(res) {
							if (res != '') {
								self.success('编辑成功');
							}
						})
				}else{
					self.info.sysUserDto = {};
					self.info.sysUserDto.dataAuth = self.info.dataAuth;
					self.info.sysUserDto.userName = self.info.userName;
					self.info.sysUserDto.userStatus = self.info.userStatus;
					self.info.sysUserDto.id = self.info.userId;
					self.info.sysUserDto.avatar = self.avatar;
					var a = [];
					for (var i = 0; i < self.info.roles.length; i++) {
						a.push(self.info.roles[i].id);
					}
					self.info.roleIds = a;
					this.$axios.post(this.$global.serverIp + 'jianeng-admin/sysClient/update', self.info)
						.then(function(res) {
							if (res != '') {
								self.success('编辑成功');
							}
						})
				}
			},
			
			
			
			success(content) {
				var self = this;
				this.$alert(content, '提示', {
					confirmButtonText: '确定',
					callback: action => {
						self.$emit("saveEdit", 2);
					}
				});
			},
			
			cancel() {
				this.$emit("saveEdit", 1);
			}
		}
	}
	import '@/assets/css/edit.css'
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>